<template>
    <div>
        <van-cell-group style="margin-top: 10px;">
            <van-cell title="退款方式" value="仅退款"></van-cell>
            <van-cell title="货物状态" is-link @click="popStateShow = true" :value="refundGoodText || '请选择'"></van-cell>
            <van-cell title="退款原因" is-link @click="popShow = true" :value="refundReason || '请选择'"></van-cell>
        </van-cell-group>
        <van-cell-group style="margin-top: 10px;">
            <van-field  :error-message="errorMsg" label="退款金额" error v-model="refundAmount" placeholder="请输入退款金额" type="number" @input="amountInput"></van-field>
        </van-cell-group>
        <van-cell-group style="margin-top: 10px;">
            <van-field label="手机号码"  v-model="mobile"  placeholder="请输入手机号码"></van-field>
            <van-field label="退款说明"  v-model="refundNote" placeholder="选填，最多200字" maxleng="200"></van-field>
            <van-cell title="上传凭证">
                <div class="image-uploader">
                    <div class="image-uploader__tip">可上传5张图片</div>
                    <div class="images-uploader">
                        <div class="image-preview-container" v-for="(item, index) in reasonImages" v-bind:key="index">
                            <div class="image-preview-container_image-wrapper">
                                <img :src="`/images/${item}`" alt="">
                            </div>
                            <i class="image-preview-container_close-icon van-icon van-icon-close" @click="removeImage(index)"><!----></i>
                        </div>
                        <van-uploader :after-read="onRead" v-if="reasonImages.length < 5">
                        </van-uploader>
                    </div>
                </div>
            </van-cell>
        </van-cell-group>

        <van-popup position="bottom" v-model="popShow">
            <van-picker :columns="reasonList" @cancel="popShow = false" show-toolbar @confirm="reasonChange"></van-picker>
        </van-popup>
        <van-popup position="bottom" v-model="popStateShow">
            <van-picker :columns="refundGoodList" @cancel="popStateShow = false" show-toolbar @confirm="refundGoodChange"></van-picker>
        </van-popup>

        <van-button type="primary" style="display: block; margin: 30px auto; width: 90%;" @click="submit">提交</van-button>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'tuihuo',
    data() {
        return {
            popShow: false,
            popStateShow: false,
            refundGoodList: [{
                text: '已收到货',
                value: 2
            }, {
                text: '未收到货',
                value: 1,
                selected: true
            }],
            reasonList: [{
                text: '质量原因',
                value: 1
            }, {
                text: '商品与描述不符',
                value: 11,
                selected: true
            },{
                text: '七天无理由',
                value: 1
            },{
                text: '买家发错货',
                value: 1
            },{
                text: '其他',
                value: 1
            }],
            errorMsg: '',

            reasonImages: [],
            refundWay: 2,
            refundReason: '',
            refundAmount: (this.$route.query.price / 100).toFixed(2),
            refundNote: '',
            mobile: this.$route.query.phone,
            refundGoodStatus: '',
            refundGoodText: '请选择'
        }
    },

    methods: {
        onRead(file) {
            let fm = new FormData();
            fm.append('useType', 'shop');
            fm.append('imageFile', file.file);
            let request = axios.create();
            let url = '/tool/image/front/uploadImage';
            let contentType = 'multipart/form-data; boundary=-------' + new Date().getTime()
            request.post(url, fm, {headers: {'Content-Type': contentType}}).then(res => {
                res = res.data;
                if (res.status === 0) {
                    this.reasonImages.push(res.data);
                } else {
                    this.$toast.fail(res.message);
                }
            })
        },

        removeImage(index) {
            this.reasonImages.splice(index, 1);
        },
        amountInput() {
            if (this.refundAmount == 0) {
                this.errorMsg = '退款金额不能为0';
                return;
            } else if (this.refundAmount * 100 > this.$route.query.price) {
                this.errorMsg = '输入的退款金额超过最大可退金额';
                return;
            }
            this.errorMsg = '';
        },
        reasonChange(item) {
            this.refundReason = item.text;
            this.popShow = false;
        },
        refundGoodChange(item) {
            this.refundGoodText = item.text;
            this.refundGoodStatus = item.value;
            this.popStateShow = false;
        },


        submit() {
            if (!this.refundReason) {
                this.$toast('请选择退款原因');
                return;
            }
            if (!this.refundGoodStatus) {
                this.$toast('请选择货物状态');
                return;
            }
            if (this.refundAmount == 0) {
                this.$toast('退款金额不能为0');
                return;
            } else if (this.refundAmount * 100 > this.$route.query.price) {
                this.$toast('输入的退款金额超过最大可退金额');
                return;
            }

            if (!this.mobile) {
                this.$toast('请输入手机号码');
                return;
            }

            if (this.refundNote.length > 200) {
                this.$taost('退款说明不能超过200字');
                return;
            }

            this.$http.post('/shop/orderRefund/front/addOrderRefund', {
                orderItemId: this.$route.query.id,
                reasonImages: this.reasonImages.toString(),
                refundWay: this.refundWay,
                refundReason: this.refundReason,
                refundAmount: this.refundAmount * 100,
                refundNote: this.refundNote,
                mobile: this.mobile,
                refundGoodStatus: this.refundGoodStatus
            }).then(res => {
                if (res.status === 0) {
                    console.log('tuikuan申请提交')
                    console.log(res)
                    this.$toast.success('提交成功');
                    setTimeout(() => {
                        // this.$router.go(-2);
                        // this.$router.push('/mine');
                        this.$router.push('/order/refundDetail/'+res.data);
                    }, 700)
                } else {
                    this.$taost.fail(res.message);
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
/deep/.van-cell__title {
    max-width: 90px;
}
.image-uploader {
    text-align: left;
    .image-uploader__tip {
        font-size: 12px;
        color: #777;
    }
    .images-uploader {
        line-height: 0;
        .image-preview-container {
            display: inline-block;
            width: 50px;
            height: 50px;
            position: relative;
            margin: 4px 10px 0 0;
            .image-preview-container_image-wrapper {
                height: 50px;
                width: 50px;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
                overflow: hidden;
                img {
                    height: 50px;
                }
            }
            .image-preview-container_close-icon {
                position: absolute;
                width: 16px;
                height: 16px;
                font-size: 16px;
                background: #fff;
                border-radius: 16px;
                top: -6px;
                right: -6px;
                color: #939393;
                font-weight: lighter;
            }
        }

        /deep/ .van-uploader {
            /deep/ i {display: none;}
            box-sizing: border-box;
            margin-top: 4px;
            height: 50px;
            width: 50px;
            border: 1px solid #e9e8e8;
            background: url(https://su.yzcdn.cn/wsc-h5-trade/images/refund-image-add-icon.png);
            background-size: 42%;
            background-position: 50%;
            background-repeat: no-repeat;
        }
    }

}
</style>
